// 样式-背景
import React, { useEffect, useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import InputColorPicker from './InputColorPicker';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const BackGround = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;
	// console.log( props );
	const [ backgroundColor, setBackgroundColor ] = useState( config.style.chartBackgroundColor || 'rgba(134,188,37,1)' );

	const handleChangeBgColorComplete = ( color ) => {
		// console.log( color, backgroundColor );
		setBackgroundColor( color );
		form.setFieldsValue( { chartBackgroundColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	useEffect( () => {
		setBackgroundColor( config.style.chartBackgroundColor || 'rgba(134,188,37,1)' );
	} ,[ config ] );
	// console.log( backgroundColor, config.style );

	return (
		<div>
			<FormItem label="背景色" name="chartBackgroundColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					key='chartBackgroundColor'
					color={backgroundColor}
					change={handleChangeBgColorComplete}
				></InputColorPicker>
			</FormItem>
		</div>
	);

};

export default React.memo( BackGround );
